<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery021</title>

<!-- 
第一节：Jquery 隐藏与显示DOM
第二节：Jquery 淡入和淡出DOM
第三节：Jquery 滑动DOM
第四节：Jquery 动画
第五节：Jquery callBack 回调方法
第六节：Jquery 暂停动画
 -->
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

<script type="text/javascript">
	//文档加载完毕事件
	$(document).ready(function(){
		
		$("#b1").click(function(){
			//DOM显示   show()方法
			$("#p1").show();
		});
		
		$("#b2").click(function(){
			//DOM隐藏  hide()方法
			$("#p1").hide();
		});
		
		$("#b3").click(function(){
			//DOM淡出  fadeOut()方法
			$("#d1").fadeOut();
		});
		
		$("#b4").click(function(){
			//DOM淡入  fadeIn()方法
			$("#d1").fadeIn();
		});
		
		
		$("#b5").click(function(){
			//DOM淡入淡出开关  fadeToggle()方法
			//$("#d1").fadeToggle();
			//slow表示慢   fast表示快
			//$("#d1").fadeToggle("slow");
			//指定的时间内完成淡入或者淡出  单位为ms
			$("#d1").fadeToggle(5000);
			
		});
		
		$("#b6").click(function(){
			//DOM透明度动画 fadeTo()方法
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});
		
		$("#b7").click(function(){
			//DOM向下滑动 slideDown()方法
			$("#d4").slideDown("slow");
		});
		
		$("#b8").click(function(){
			//DOM向上滑动 slideUp()方法
			$("#d4").slideUp("slow");
		});
		
		$("#b9").click(function(){
			//DOM移动	animate()方法  使用时候的position不能为默认值   一般设置为absolute（相对布局）
			$("#d5").animate({left:"500px"},"slow");
		});
		
		$("#b10").click(function(){
			//DOM移动	animate()方法  使用时候的position不能为默认值   一般设置为absolute（相对布局）
			$("#d5").animate({
				left:"500px",
				width:"150px",
				height:"150px",
				opacity:0.5
				},"slow");
		});
		
		$("#b11").click(function(){
			//DOM移动	animate()方法  使用时候的position不能为默认值   一般设置为absolute（相对布局）
			$("#d5").animate({
				left:"500px",
				width:"+=150px",
				height:"+=150px",
				opacity:0.5
				},"slow");
		});
		
		
		$("#b12").click(function(){
			//DOM显示   show()方法
			//带回调方法	//其他的方法也支持
			$("#p2").show(function(){
				alert("操作的内容出来了");
			});
		});
		
		
		$("#b13").click(function(){
			//DOM移动	animate()方法  使用时候的position不能为默认值   一般设置为absolute（相对布局）
			$("#d6").animate({left:"500px"},"slow");
		});
		
		$("#b14").click(function(){
			//DOM移动	animate()方法  使用时候的position不能为默认值   一般设置为absolute（相对布局）
			$("#d6").stop();
		});
		
		
	});
	
	

</script>
</head>
<body>

<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>

<p id="p1">操作的内容</p>

<hr/>

<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>

<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>

<div id="d4" style="width: 500px;height: 100px;background-color: gray;display: none;">
	<p>Java1234</p>
	<p>Java12345678912</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red; margin: 10px;position: absolute;"></div> -->
<hr/>

<input type="button" value="出来" id="b12"/>
<p id="p2" style="display: none;">操作的内容</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red; margin: 10px;position: absolute;"></div>
</body>
</html>